import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Input, Grid, Feedback, Button, NumberPicker, Upload } from '@icedesign/base';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import { PayService } from '../../services'
const { Row, Col } = Grid;
const { ImageUpload } = Upload

export default class Info extends Component {
  static displayName = 'Info';

  constructor(props) {
    super(props);
    this.state = {
      visible : false,
      value: {
        images : null,
        title : '',
        price : 10,
        oldprice : 99,
      },
    };
  }

  componentDidMount = async() =>{
    let value = await PayService.getPaybase()
    if(value && value.value){
      value = JSON.parse(value.value)
    }else{
      value = {
        images : [],
        title : '',
        price : 10,
        oldprice : 99,
      }
    }
    this.setState({value})
  }

  formChange = (value) => {
    this.setState({
      value,
    });
  };

  validateAllFormField = async() => {
    this.refs.form.validateAll(async(errors, values) => {
      if (errors) { return; }
      let imgs = []
      let tmplist = values.images.fileList ? values.images.fileList : values.images
      tmplist.forEach(i=>{
        imgs.push({downloadURL : i.imgURL, imgURL:i.imgURL})
      })
      let req = {
        ...values,
        images : imgs
      }
      await PayService.setPaybase(JSON.stringify(req))
      Feedback.toast.success('保存成功')
      this.componentDidMount()
    });
  };

  uploadFormat = (res) =>{
    return { 
      code: res.success ? '0' : '1', 
      imgURL: res.data.filename
    };
  }

  render() {
    return (
      <div className="change-password-form">
        <IceContainer>
          <IceFormBinderWrapper value={this.state.value} onChange={this.formChange} ref="form" >
            <div style={styles.formContent}>
              <h2 style={styles.formTitle}>物料基本设置</h2>

              <Row wrap style={styles.formItem}>
                <Col xxs="7" s="4" l="3" style={styles.formLabel}>图片：</Col>
                <Col xxs="16" s="10" l="7">
                  <IceFormBinder name="images" required message="必填">
                  {
                    this.state.value.images != null ?
                      <ImageUpload action="/api/upload/file" listType="picture-card" defaultFileList={this.state.value.images}
                        locale={{ image: { cancel: '取消上传', addPhoto: '上传图片', } }}
                        accept="image/png, image/jpg" formatter={this.uploadFormat}/>
                      :
                      <div/>
                  }
                  </IceFormBinder>
                  <IceFormError name="images" />
                </Col>
              </Row>
              
              <Row wrap style={styles.formItem}>
                <Col xxs="7" s="4" l="3" style={styles.formLabel}> 标题： </Col>
                <Col xxs="16" s="10" l="7">
                  <IceFormBinder name="title" required message="必填">
                    <Input size="large" placeholder="请输入物料标题" />
                  </IceFormBinder>
                  <IceFormError name="title" />
                </Col>
              </Row>

              <Row wrap style={styles.formItem}>
                <Col xxs="7" s="4" l="3" style={styles.formLabel}> 价格： </Col>
                <Col xxs="16" s="10" l="7">
                  <IceFormBinder type={'number'} name="price" required message="必填">
                    <NumberPicker type="inline" inputWidth={"60px"} defaultValue={10} min={0.01} max={99999} step={0.01}/>
                  </IceFormBinder>
                  <IceFormError name="price" />
                </Col>
              </Row>

              <Row wrap style={styles.formItem}>
                <Col xxs="7" s="4" l="3" style={styles.formLabel}> 原价： </Col>
                <Col xxs="16" s="10" l="7">
                  <IceFormBinder type={'number'} name="oldprice" required message="必填">
                    <NumberPicker type="inline" inputWidth={"60px"} defaultValue={10} min={0.01} max={99999} step={0.01}/>
                  </IceFormBinder>
                  <IceFormError name="oldprice" />
                </Col>
              </Row>

            </div>
          </IceFormBinderWrapper>

          <Row wrap style={{ marginTop: 20 }}>
            <Col xxs={{ offset: 6 }} s={{ offset: 3 }}>
              <Button size="large" type="primary" onClick={this.validateAllFormField}>
                提 交
              </Button>
            </Col>
          </Row>
        </IceContainer>

      </div>
    );
  }
}

const styles = {
  formContent: {
    width: '100%',
    position: 'relative',
  },
  formItem: {
    marginBottom: 25,
  },
  formLabel: {
    height: '32px',
    lineHeight: '32px',
    textAlign: 'right',
  },
  formTitle: {
    margin: '0 0 20px',
    paddingBottom: '10px',
    borderBottom: '1px solid #eee',
  },
};
